<template>
    <div>
		<el-form ref="queryForm" class="query-box" v-model="queryParams" :inline="true">
			<el-form-item :label="translate('USER.USER_ID')" prop="userId" label-width="120px">
				<el-input v-model="queryParams.userId"
						  :placeholder="translate('FROM.PLACEHOLDER', {param: 'USER.USER_ID'})" clearable
						  style="width: 240px"
						  size="small" @keyup.enter.native="handleQuery"/>
			</el-form-item>
			<el-form-item :label="translate('LOGIN_INFO.LOGIN_TYPE')" prop="loginType" label-width="120px">
				<el-select v-model="queryParams.loginType"
						   :placeholder="translate('LOGIN_INFO.LOGIN_TYPE')" clearable size="small" style="width: 240px">
					<el-option v-for="(value,key) in dicts.LOGIN_TYPE" :key="key" :label="value" :value="value"/>
				</el-select>
			</el-form-item>
			<el-form-item :label="translate('COMMON.STATUS')" prop="status" label-width="120px">
				<el-select v-model="queryParams.status"
						   :placeholder="translate('COMMON.STATUS')" clearable size="small" style="width: 240px">
					<el-option v-for="(value,key) in dicts.STATUS" :key="key" :label="value" :value="value"/>
				</el-select>
			</el-form-item>
			<el-form-item :label="translate('LOGIN_INFO.LOGIN_TIME')" label-width="120px">
				<el-date-picker v-model="createDateRange"
								size="small" value-format="yyyy-MM-dd"
								type="daterange" range-separator="-"
								style="width: 240px"
								:start-placeholder="translate('COMMON.START_DATE')"
								:end-placeholder="translate('COMMON.END_DATE')"/>
			</el-form-item>
			<el-form-item :label="translate('COMMON.UPDATE_TIME')" label-width="120px">
				<el-date-picker v-model="updateDateRange"
								size="small" value-format="yyyy-MM-dd"
								type="daterange" range-separator="-"
								style="width: 240px"
								:start-placeholder="translate('COMMON.START_DATE')"
								:end-placeholder="translate('COMMON.END_DATE')"/>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{translate('OPERATION.QUERY')}}</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="handleResetQuery">{{translate('OPERATION.RESET')}}</el-button>
				<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-permission="'SYS_LOGIN_INFO_EXPORT'">{{translate('OPERATION.EXPORT')}}</el-button>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import {UserApi} from '@/api';

	export default {
        name: "ToolBar",
		components: {},
		props: {
			dicts: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				queryParams: {},
				createDateRange: [],
				updateDateRange: [],
			}
		},
		mounted() {
		},
		methods: {
			handleQuery() {
				this.commitChange();
			},
			handleResetQuery(){
				this.queryParams = {};
				this.createDateRange = [];
				this.updateDateRange = [];
				this.commitChange();
			},
			handleExport() {
				this.$confirm(this.translate('FROM.CONFIRM_EXPORT', {module: 'MODULE.LOGIN_INFO'}), this.translate('FROM.WARNING'), {
					confirmButtonText: this.translate('FROM.SUBMIT'),
					cancelButtonText: this.translate('FROM.CANCEL'),
					type: "warning"
				}).then(async () => {
					this.dealWithQueryParams();
					let result = (await UserApi.loginInfo.export(this.queryParams));
					if (result.success) {
						this.downloadFile(result.data);
					}
				});
			},
			dealWithQueryParams() {
				let [startCreateTime, endCreateTime] = this.createDateRange;
				this.queryParams.startCreateTime = startCreateTime && (startCreateTime + ' 00:00:00');
				this.queryParams.endCreateTime = endCreateTime && (endCreateTime + ' 23:59:59');

				let [startUpdateTime, endUpdateTime] = this.updateDateRange;
				this.queryParams.startUpdateTime = startUpdateTime && (startUpdateTime + ' 00:00:00');
				this.queryParams.endUpdateTime = endUpdateTime && (endUpdateTime + ' 23:59:59');
			},
			commitChange() {
				this.dealWithQueryParams();
				let params = {...this.queryParams};
				this.$emit('on-change', params);
			},
		}
    }
</script>

<style scoped>

</style>
